<template>
	<view class="GoodsSwiper">
		<!-- 商品主图轮播 -->
		<view class="swiper-box">
			<swiper circular="true" autoplay="true" @change="swiperChange">
				<swiper-item 
					v-for="(item, index) in list" 
					:key="index"
				>
					<image 
						:src="item.img" 
						@tap="previewImage(previewArray[index], previewArray)"
					></image>
				</swiper-item>
			</swiper>
			<view class="indicator">
				{{currentSwiper + 1}} / {{list.length}}
			</view>
		</view>
	</view>
</template>

<script>	
	import { mapState } from 'vuex';
	import { links } from '../../common/mixins.js'
	
	export default {
		name: 'GoodsSwiper',
		mixins: [ links ],
		props: {
			theData: {
				type: Array,
				default: () => {
					return [];
				},
			},
		},
		data() {
			return {
				currentSwiper: 0,
			}
		},
		computed: {
			...mapState ([
				'debugSetting' // 将 this.debugSetting 映射为 this.$store.state.debugSetting
			]),
			list() {
				let list = JSON.parse(JSON.stringify(this.theData));
				return list.map((item) => {
					let {
						id: id,
						filePath: img,
						...rest
					} = item;
					img = this.debugSetting.resourcePath + img;
					return { id, img, ...rest};
				});
			},
			previewArray() {
				let list = [];
				this.theData.forEach((item) => {
					list.push(this.debugSetting.resourcePath + item.filePath);
				});
				return list;
			}
		},
		methods: {
			swiperChange(event) { // 轮播图指示器
				this.currentSwiper = event.detail.current;
			},
			previewImage(currentSrc, images){ // 预览图片
				this.$UIplugins.previewImage({currentSrc, images});
			},
		}
	}
</script>

<style lang="scss">
	.GoodsSwiper {
		.swiper-box {
			position: relative;
			width: 100%;
			height: 80vw;
			swiper {
				width: 100%;
				height: 80vw;
				swiper-item {
					image {
						width: 100%;
						height: 80vw;
					}
				}
			}
			.indicator{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 25upx;
				height: 40upx;
				border-radius: 40upx;
				font-size: 22upx;
				position: absolute;
				bottom: 20upx;
				right: 20upx;
				color: #fff;
				background-color: rgba(0, 0, 0, 0.2);
			}
		}
	}
</style>
